<!-- <template>
  <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
  <router-view></router-view>
</template> -->

<template>
  <n-space vertical size="large">
    <n-layout has-sider>
      <n-layout-sider content-style="padding: 12px;">
      </n-layout-sider>
      <n-layout>
        <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
        <router-view></router-view>
      </n-layout>
      <n-layout-sider content-style="padding: 12px;">
      </n-layout-sider>
    </n-layout>
  </n-space>
</template>

<script lang="ts">
import { defineComponent, h, ref } from 'vue'
import type { MenuOption } from 'naive-ui'
import { RouterLink } from 'vue-router'

// export default {
//   name: 'App',
// }

const menuOptions: MenuOption[] = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'json'
          }
        },
        { default: () => 'json格式化' }
      ),
    key: 'json',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'length'
          }
        },
        { default: () => '字符串长度' }
      ),
    key: 'length',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'qr'
          }
        },
        { default: () => '二维码生成' }
      ),
    key: 'qr',
  }
]

export default defineComponent({
  setup() {
    return {
      activeKey: ref<string | null>(null),
      menuOptions
    }
  }
})
</script>